<template>
  <div class="container tech-container">
    <div class="header">
      <h2 class="neon-title">AI 视频制作 <span class="sub-text">// SYSTEM READY</span></h2>
      <p class="sub-text">通过AI技术，只需输入视频标题，即可快速生成高清画质视频，支持自定义片段，实时预览效果。</p>
    </div>

    <div class="content">
      <el-row :gutter="20">
        <el-col :span="7">
          <el-card class="tech-card">
            <div slot="header" class="clearfix">
              <i class="el-icon-edit-outline tech-icon" /><span>提示词设置 (PROMPT)</span>
            </div>
            <div class="form-container">
              <el-form :model="formData" ref="form" label-width="100px" class="tech-form" :label-position="labelPosition">
                <el-form-item label="视频标题" prop="videoTitle">
                  <el-input v-model="formData.videoTitle" placeholder="输入视频标题" class="tech-input"></el-input>
                </el-form-item>
                <el-form-item label="视频描述" prop="videoDescription">
                  <el-input type="textarea" v-model="formData.videoDescription" placeholder="请输入视频描述"
                    rows="4" class="tech-input"></el-input>
                </el-form-item>
                <el-form-item label="视频风格" prop="videoStyle">
                  <el-select v-model="formData.videoStyle" placeholder="写实风格" style="width: 100%" class="tech-select">
                    <el-option label="写实风格" value="realistic"></el-option>
                    <el-option label="卡通风格" value="cartoon"></el-option>
                    <el-option label="未来感风格" value="futuristic"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="视频长度" prop="videoLength">
                  <el-select v-model="formData.videoLength" placeholder="短片 (10s)" style="width: 100%" class="tech-select">
                    <el-option label="短片 (10s)" value="short"></el-option>
                    <el-option label="中等长度 (15s)" value="medium"></el-option>
                    <el-option label="长片 (30s)" value="long"></el-option>
                  </el-select>
                </el-form-item>
              </el-form>
            </div>
          </el-card>

          <el-card class="tech-card" style="margin-top: 20px;">
            <div slot="header" class="clearfix">
              <i class="el-icon-paperclip tech-icon" /><span>文件上传 (ASSET UPLOAD)</span>
            </div>
            <el-upload drag action="https://jsonplaceholder.typicode.com/posts/" multiple class="tech-upload-area">
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">将文件拖到此处，或<em class="neon-text-primary">点击上传</em></div>
            </el-upload>
          </el-card>

          <el-card class="tech-card" style="margin-top: 20px;">
            <div slot="header" class="clearfix">
              <i class="el-icon-s-tools tech-icon" /><span>操作控制 (CONTROL)</span>
            </div>
            <div>
              <el-button type="primary" class="tech-button primary-btn">
                <i class="el-icon-cpu"></i> 生成视频 (EXECUTE)
              </el-button>
            </div>
            <div><el-button class="tech-button secondary-btn">保存草稿 (SAVE DRAFT)</el-button></div>
            <div><el-button class="tech-button secondary-btn">清空内容 (CLEAR INPUT)</el-button></div>
          </el-card>

        </el-col>

        <el-col :span="17">
          <el-card class="tech-card">
            <div slot="header" class="clearfix">
              <i class="el-icon-view tech-icon" /><span>视频预览 (OUTPUT)</span>
            </div>
            <div class="preview-box">
              <video-player class="video-player" :options="playerOptions" :playsinline="true" :preload="true"
                :autoplay="true" :loop="true" :muted="true"></video-player>
            </div>
          </el-card>

          <el-card class="tech-card" style="margin-top: 20px;">
            <div slot="header" class="clearfix">
              <i class="el-icon-s-operation tech-icon" /><span>分片信息设置 (SEGMENT DATA)</span>
            </div>
            <el-timeline class="tech-timeline">
              <el-timeline-item v-for="(item, index) in timelineData" :key="index" :timestamp="item.timestamp"
                placement="top">
                <el-card class="timeline-card">
                  <span class="segment-title">{{ item.segmentTitle }}</span>
                  <p class="segment-prompt">{{ item.promptWords }}</p>
                  <p class="segment-keywords">关键字: <span class="neon-text-accent">{{ item.keywords.join(', ') }}</span></p>
                  <p class="segment-progress">完成进度: <span class="neon-text-primary">{{ item.progress }}</span></p>
                  <p class="segment-time">提交于: {{ item.timestamp }}</p>
                </el-card>
              </el-timeline-item>
            </el-timeline>
          </el-card>

          <el-card class="tech-card" style="margin-top: 20px;">
             <div slot="header" class="clearfix">
               <i class="el-icon-folder-checked tech-icon" /><span>最近完成 (RECENT LOG)</span>
             </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
// JavaScript 逻辑保持不变
export default {
  data() {
    return {
      labelPosition: 'top',
      formData: {
        videoTitle: '',
        videoDescription: '',
        videoStyle: 'realistic',
        videoLength: 'medium'
      },
      playerOptions: {
        techOrder: ['html5'],
        sources: [
          {
            type: 'video/mp4',
            src: 'https://vjs.zencdn.net/v/oceans.mp4',  // 视频源
          },
        ],
        poster: 'https://vjs.zencdn.net/v/oceans.png',  // 预览图
        controls: true,
        controlBar: {
          children: ['playToggle', 'volumePanel', 'timeDivider', 'progressControl', 'fullscreenToggle'],
          align: 'center'
        },
      },
      // 模拟的时间线数据
      // 更新后的分片信息数据
      timelineData: [
        {
          segmentTitle: '片段 1',
          promptWords: 'AI 视频生成，视频编辑，实时预览',
          keywords: ['AI', '视频生成', '实时预览'],
          progress: '40%',
          timestamp: '2018/4/12'
        },
        {
          segmentTitle: '片段 2',
          promptWords: '视频风格设置，选择不同风格',
          keywords: ['风格', '设置', '选择'],
          progress: '70%',
          timestamp: '2018/4/3'
        },
        {
          segmentTitle: '片段 3',
          promptWords: '视频播放，上传文件',
          keywords: ['播放', '上传', '文件'],
          progress: '100%',
          timestamp: '2018/4/2'
        }
      ],
    };
  },
  methods: {
    submitForm() {

    }
  }
};
</script>

<style scoped lang="less">
/* ================= 赛博朋克主题变量 ================= */
@bg-dark: #0f1219;
@bg-panel: rgba(26, 31, 44, 0.7);
@primary-color: #00f2ff; /* Cyber Cyan */
@accent-color: #7d2ae8;  /* Neon Purple */
@text-main: #e2e8f0;
@text-sub: #94a3b8;
@border-color: rgba(255, 255, 255, 0.08);

/* ================= 全局容器和字体 ================= */
.tech-container {
  background-color: @bg-dark;
  color: @text-main;
  min-height: 100vh;
  padding: 30px;
  font-family: 'Inter', 'Courier New', monospace;
}

/* ================= 头部样式 ================= */
.header {
  padding-bottom: 20px;
  border-bottom: 1px solid @border-color;
  margin-bottom: 20px;
}

.neon-title {
  color: @primary-color;
  text-shadow: 0 0 15px rgba(0, 242, 255, 0.6);
  font-size: 32px;
  font-weight: 800;
  letter-spacing: 2px;
  
  .sub-text {
    font-size: 16px;
    color: @text-sub;
    margin-left: 10px;
    font-weight: normal;
  }
}

.sub-text {
  color: @text-sub;
  font-size: 14px;
}

/* ================= 卡片 (el-card) 样式重写 ================= */
.tech-card {
  background: @bg-panel !important;
  backdrop-filter: blur(10px);
  border: 1px solid @border-color;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
  color: @text-main;
  
  ::v-deep .el-card__header {
    border-bottom: 1px solid @border-color;
    padding: 18px 20px;
    color: @text-main;
    font-size: 16px;
  }

  span {
      font-weight: 600;
      color: @text-main;
      margin-left: 10px;
  }
}

.tech-icon {
  color: @primary-color !important;
  text-shadow: 0 0 8px rgba(0, 242, 255, 0.4);
  font-size: 20px;
}

/* ================= 表单 (Form) 样式重写 ================= */
.form-container {
  padding: 10px 0;
}

::v-deep .el-form-item__label {
  color: @text-sub !important;
  font-size: 13px;
  letter-spacing: 1px;
}

/* 输入框和文本域 */
.tech-input, .tech-select {
  ::v-deep .el-input__inner, ::v-deep .el-textarea__inner {
    background-color: rgba(0, 0, 0, 0.3) !important;
    border: 1px solid @border-color !important;
    color: @text-main !important;
    border-radius: 4px;
    transition: all 0.3s;

    &::placeholder {
      color: rgba(255, 255, 255, 0.3);
    }

    &:focus {
      border-color: @primary-color !important;
      box-shadow: 0 0 8px rgba(0, 242, 255, 0.4);
    }
  }
}

/* Select 下拉菜单覆盖 */
::v-deep .el-select-dropdown {
  background-color: @bg-dark !important;
  border: 1px solid @border-color !important;
  
  .el-select-dropdown__item {
    color: @text-main;
    &:hover {
      background-color: rgba(0, 242, 255, 0.1) !important;
      color: @primary-color;
    }
    &.selected {
      color: @primary-color;
      font-weight: bold;
      background-color: rgba(0, 242, 255, 0.2) !important;
    }
  }
}

/* ================= 文件上传 (Upload) 样式重写 ================= */
.tech-upload-area {
  width: 100%;
  margin-top: 10px;
  
  ::v-deep .el-upload-dragger {
    background: rgba(0, 0, 0, 0.3) !important;
    border: 1px dashed @border-color !important;
    color: @text-sub;
    width: 100%; /* 撑满卡片 */
    height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: all 0.3s;

    &:hover {
      border-color: @primary-color !important;
      box-shadow: 0 0 10px rgba(0, 242, 255, 0.3);
    }
    
    .el-icon-upload {
      color: @primary-color;
      font-size: 40px;
      margin-bottom: 10px;
    }
  }
}

.neon-text-primary {
  color: @primary-color;
  text-shadow: 0 0 5px rgba(0, 242, 255, 0.3);
}
.neon-text-accent {
  color: @accent-color;
  text-shadow: 0 0 5px rgba(125, 42, 232, 0.3);
}

/* ================= 按钮 (Button) 样式重写 ================= */
.tech-button {
  width: 100%;
  margin-top: 10px !important;
  border-radius: 4px;
  transition: all 0.3s;
  
  &.primary-btn {
    // 主按钮：霓虹渐变
    background: linear-gradient(90deg, @primary-color, @accent-color) !important;
    border: none !important;
    color: #fff !important;
    box-shadow: 0 0 15px rgba(0, 242, 255, 0.4);
    
    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 20px rgba(0, 242, 255, 0.6);
    }
  }
  
  &.secondary-btn {
    // 次要按钮：透明边框科技感
    background-color: transparent !important;
    border: 1px solid @border-color !important;
    color: @text-sub !important;
    
    &:hover {
      border-color: @accent-color !important;
      color: @accent-color !important;
      background-color: rgba(125, 42, 232, 0.1) !important;
    }
  }
}

/* ================= 视频预览 (Video Preview) ================= */
.preview-box {
  margin-top: 20px;
  background: #000;
  border: 2px solid @primary-color;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 0 25px rgba(0, 242, 255, 0.4);
  /* 确保视频播放器适应容器 */
  width: 100%; 
  aspect-ratio: 16/9; /* 保持常见的视频比例 */
}

.video-player {
  width: 100%;
  height: 100%;
  
  // 覆盖 video.js 默认样式
  ::v-deep .video-js {
    font-family: 'Courier New', monospace;
  }
  ::v-deep .vjs-poster {
    background-color: #000;
  }
  ::v-deep .vjs-control-bar {
    background-color: rgba(0, 0, 0, 0.8) !important;
  }
}


/* ================= 时间线 (Timeline) 样式重写 ================= */
.tech-timeline {
  padding: 20px 10px;
  
  ::v-deep .el-timeline-item {
    padding-bottom: 25px;
  }
  
  // 时间线节点
  ::v-deep .el-timeline-item__node {
    background-color: @primary-color;
    box-shadow: 0 0 8px @primary-color;
    width: 12px;
    height: 12px;
    border: 1px solid @bg-dark;
  }
  
  // 时间线连接线
  ::v-deep .el-timeline-item__tail {
    border-left: 1px dashed @border-color;
  }
  
  // 时间戳
  ::v-deep .el-timeline-item__timestamp {
    color: @text-sub;
    font-family: 'Consolas', monospace;
    font-size: 12px;
  }
}

.timeline-card {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  
  .segment-title {
    font-weight: 600;
    font-size: 15px;
    color: @text-main;
    display: block;
    margin-bottom: 5px;
  }
  .segment-prompt, .segment-keywords, .segment-progress, .segment-time {
    color: @text-sub;
    font-size: 12px;
    margin: 4px 0;
  }
  .segment-keywords span, .segment-progress span {
    font-weight: bold;
  }
}

@media (max-width: 1200px) {
  .preview-box {
     aspect-ratio: unset;
     height: 350px;
  }
}

@media (max-width: 992px) {
  .tech-container { padding: 10px; }
  .el-col { margin-bottom: 20px; }
}
</style>